Skip to content

Counter Overlay

The Counter Overlay allows you to display custom counters on your stream that can be updated through chat commands. Perfect for tracking all sorts of things you want to showcase during your stream.

Features

  • Create unlimited counters
  • Update counters through chat commands
  • Customize appearance (font, size, color, shadows)
  • Real-time updates every 10 seconds
  • Option to show counter value only (hide name)

Getting Started

  1. Create a counter using the chat command:

    !counter add <name> [initial_value]

    Example: !counter add deaths 0

  2. Go to your Overlays page

  3. Select "Counters" from the overlay type dropdown

  4. Find your counter in the list and click the overlay URL to copy it

  5. Add the URL as a browser source in your streaming software (OBS, Streamlabs, etc.)

Chat Commands

  • !counter <name> - Get the current value of a counter
  • !counter add <name> [value] - Create a new counter (default value: 0)
  • !counter remove <name> - Delete a counter
  • !counter set <name> <value> - Set counter to specific value
  • !counter inc <name> [amount] - Increment counter (default: 1)
  • !counter dec <name> [amount] - Decrement counter (default: 1)
  • !counter reset <name> - Reset counter to 0
  • !counter level <name> <Everyone|Subscribers|Moderators|Streamer> - Set who can use the direct counter command
  • !counter list - List all counters

You can also use the shortcut !co instead of !counter.

Counters also expose a direct command when no built-in or custom command uses the same name:

  • !<name> - Increment by 1
  • !<name> +5 - Increment by 5
  • !<name> -2 - Decrement by 2
  • !<name> 10 - Set the counter to 10

Customization Options

In the overlays settings page, you can customize:

  • Font: Choose from various Google Fonts
  • Text Size: From extra small to 3x large
  • Text Color: Any color using the color picker
  • Text Shadow: Toggle shadow effect for better visibility
  • Hide Title: Show only the counter value without the name

OBS Setup

  1. Add a Browser Source in OBS
  2. Set the URL to your counter overlay URL
  3. Set width: 800 and height: 600 (adjust as needed)
  4. Check "Shutdown source when not visible" and "Refresh browser when scene becomes active"
  5. The overlay background is transparent by default